import { BasicColumn, FormSchema } from '@/components/Table';
import { formatToDateTime } from '@/utils/dateUtil';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';

import { deptTreeSelectApi } from '@/api/system/user';
import { getPostAllApi } from '@/api/system/post';
import { USER_TYPE } from '@/api/system/model/userModel';

export const columns: BasicColumn[] = [
  {
    title: '用户编号',
    dataIndex: 'id',
    // width: 180,
  },
  {
    title: '登录账号',
    dataIndex: 'account',
    // width: 180,
  },
  {
    title: '用户名称',
    dataIndex: 'username',
    // width: 180,
  },

  {
    title: '部门',
    dataIndex: 'deptName',
    // width: 180,
  },
  {
    title: '手机号码',
    dataIndex: 'phoneNumber',
    // width: 180,
  },
  {
    title: '状态',
    dataIndex: 'userStatus',
    // width: 180,
    customRender: ({ record }) => {
      const status = record.userStatus;
      const enable = status === '0' ? true : false;
      const color = enable ? 'green' : 'red';
      const text = enable ? '正常' : '禁用';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    // width: 180,
    customRender: ({ text }) => formatToDateTime(text),
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'username',
    label: '用户名称',
    component: 'Input',
    colProps: { span: 5 },
  },
  {
    field: 'account',
    label: '登录账号',
    component: 'Input',
    colProps: { span: 5 },
  },
  {
    field: 'userStatus',
    label: '状态',
    component: 'Select',
    componentProps: {
      options: [
        { label: '正常', value: '0' },
        { label: '禁用', value: '1' },
      ],
    },
    colProps: { span: 5 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'id',
    label: '编号',
    required: true,
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'deptId',
    label: '归属部门',
    required: true,
    component: 'ApiTreeSelect',
    componentProps: {
      api: deptTreeSelectApi,
      // fieldNames: {
      //   label: 'name',
      //   key: 'id',
      //   value: 'id',
      // },ccccc
      labelField: 'name',
      valueField: 'id',
      immediate: true,
      // getPopupContainer: () => document.body,
    },
  },
  {
    field: 'account',
    label: '登录账号',
    required: true,
    component: 'Input',
    componentProps: {
      maxlength: 20,
      showCount: true,
    },
    ifShow: ({ values }) => {
      return values.id ? false : true;
    },
    rules: [
      { required: true, message: '登录账号不能为空', trigger: 'blur' },
      { min: 2, max: 20, message: '登录账号长度必须介于 2 和 20 之间', trigger: 'blur' },
    ],
  },
  {
    field: 'username',
    label: '用户名称',
    required: true,
    component: 'Input',
    componentProps: {
      maxlength: 50,
      showCount: true,
    },
    rules: [
      { required: true, message: '用户名称不能为空', trigger: 'blur' },
      { min: 2, max: 50, message: '用户名称长度必须介于 2 和 50 之间', trigger: 'blur' },
    ],
  },

  {
    field: 'password',
    label: '用户密码',
    required: true,
    component: 'Input',
    ifShow: ({ values }) => {
      console.log(values);
      return values.id ? false : true;
    },
    componentProps: {
      maxlength: 20,
      showCount: true,
    },
    rules: [
      { required: true, message: '用户密码不能为空', trigger: 'blur' },
      { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
    ],
  },

  {
    field: 'sex',
    label: '性别',
    component: 'RadioGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '男', value: '0' },
        { label: '女', value: '1' },
      ],
    },
  },
  {
    field: 'phoneNumber',
    label: '手机号码',
    required: true,
    component: 'Input',
    componentProps: {
      maxlength: 11,
      showCount: true,
    },
    rules: [
      { required: true, message: '手机号码不能为空', trigger: 'blur' },
      { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
  },
  {
    field: 'email',
    label: '邮箱',
    required: true,
    component: 'Input',
    componentProps: {
      maxlength: 300,
      showCount: true,
    },
    rules: [
      { required: true, message: '邮箱不能为空', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
    ],
  },
  {
    field: 'postId',
    label: '岗位',
    required: true,
    component: 'ApiSelect',
    componentProps: {
      api: getPostAllApi,

      labelField: 'postName',
      valueField: 'id',
      immediate: true,
      // getPopupContainer: () => document.body,
    },
  },
  {
    field: 'userStatus',
    label: '状态',
    component: 'RadioGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '正常', value: '0' },
        { label: '禁用', value: '1' },
      ],
    },
    ifShow: ({ values }) => {
      return values.userType !== USER_TYPE.ADMIN;
    },
  },
  {
    label: '备注',
    field: 'remark',
    component: 'InputTextArea',
    componentProps: {
      maxlength: 300,
      showCount: true,
    },
  },
];

export const editSchema: FormSchema[] = [
  {
    field: 'password',
    label: '新密码',
    component: 'Input',
    componentProps: {
      maxlength: 20,
      showCount: true,
    },
    rules: [
      { required: true, message: '用户密码不能为空', trigger: 'blur' },
      { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
    ],
  },
];

export const outSchema: FormSchema[] = [
  {
    field: 'username',
    label: '用户名称',
    component: 'Input',
    dynamicDisabled: true,
  },
];
